<script>

import moment from "moment";
import {
  addStudent,
  cancellationStudent, cancelStudent,
  getStudent,
  getTeacher,
  getTeacherRest,
  servereducible

} from "@/api/tool/scheduling/Schedules";


export default {

  name: "test2",

  data() {

    return {

      text: '',

      dialogVisibleReason: false,

      dialogVisibleLeft: false,

      top0: '',

      left0: '',

      valueMethod: '线下咨询',

      valueSubject: '个人预约',

      valueStudent: '',

      dialogVisible: false,

      checkFlagRest: false,

      serveBtn: false,

      checkFlag: false,

      timeList: [],

      flagState: false,

      flag: false,

      options: [],

      value: '张老师',

      valueDate: new Date(),

      dateTable: [],

      newDateTable: [],

      reducible: [],

      newReducible: [[], []],

      query: {

        date: '',

        teacherId: '1639442734806773762'

      },

      ids: '',

      newData: [],

      studentList: [],

      optionsSubject: [

        {

          value: '0',

          label: '个人预约'

        }, {

          value: '1',

          label: '团体预约'

        },

      ],

      optionsMethods: [

        {

          value: '线下咨询',

          label: '线下咨询',

        }, {

          value: '网络咨询',

          label: '网络咨询',

          disabled: true

        },

        {

          value: '电话咨询',

          label: '电话咨询',

          disabled: true

        },

      ],

      stuId: '',

      peopleType: "",

      timeListData: '',

      status: '',

      studentMessageName: '',

      studentEducation: "",

      studentCode: '',

      studentMethods: '',

      studentId: '',

      valueDate0: ''

    }

  },

  methods: {

    //选择学生

    selectStu(val) {

      this.stuId = val

      console.log(val)

    },

    //选择咨询师

    change(id) {

      console.log(id)

      this.query.teacherId = id

      this.getTimeList()

    },

    //时间列表

    getTimeList() {

      getTeacherRest(this.query).then(res => {

        console.log(res)

        this.timeList = res.rows

        this.timeListData = res.data

        res.data.forEach(item => {

          this.newDateTable.push(item.date)

        })

      })

    },

    // 点击

    select(date) {

      this.query.date = date

      getTeacherRest(this.query).then(res => {

        console.log(res)

        this.timeList = res.rows

        this.newData = res.data

        res.data.forEach(item => {

          this.newDateTable.push(item.date)

        })

      })

    },

    // 鼠标右击状态变更

    clickRight(val, n, status) {

      this.status = status

      this.flagState = this.status !== '1';

      event.preventDefault()

      console.log(val)

      this.ids = val

      if (n === 0) {

        this.top0 = 300 + 'px'

        this.left0 = 1000 + 'px'

      } else if (n === 1) {

        this.top0 = 300 + 'px'

        this.left0 = 1150 + 'px'

      } else if (n === 2) {

        this.top0 = 300 + 'px'

        this.left0 = 1300 + 'px'

      } else {

        this.top0 = 400 + 'px'

        this.left0 = 1000 + 'px'

      }

    },

    clickRightNone() {

      this.flagState = false

    },

    //鼠标左击事件

    clickLeft(id, status) {

      if (status === '1') {

        this.text = ''

        this.dialogVisibleLeft = true

        cancellationStudent(id).then(res => {

          console.log(res)

          this.studentId = res.data.id

          this.studentMessageName = res.data.psyStudent.name

          this.studentEducation = res.data.psyStudent.education

          this.studentCode = res.data.psyStudent.stuNum

          this.studentMethods = res.data.mode

        })

      }

    },


    //获取可约不可约class

    updateClass(data) {

      this.timeListData.forEach(item => {

        if (item.date === data.day) {

          data.status = item.status

        }

      })

      if (data.status) {

        return 'update'

      } else {

        return 'update0'

      }

    },

    //可约按钮

    reducibleBtn() {

      console.log(this.ids)

      this.checkFlagRest = true

      this.ids = ''

      this.status = '0'

      this.checkFlag = false

      this.serveBtn = true

    },

    //保存按钮

    serveBut() {

      this.serveBtn = false

      this.checkFlagRest = false

      this.checkFlag = false

      servereducible({

        ids: this.ids,

        status: this.status

      }).then(res => {

        console.log(res)

        this.$message.success('保存成功')

        this.getTimeList()

      })

    },

    //取消按钮

    cancellation() {

      this.serveBtn = false

      this.checkFlag = false

      this.checkFlagRest = false

    },

    //改变单选框

    changeCheck(val) {

      console.log(val)

      this.ids += `${val},`

      console.log(this.ids)

    },

    //休息按钮

    restBtn() {

      this.checkFlag = true

      this.ids = ''

      this.status = '2'

      this.checkFlagRest = false

      this.serveBtn = true

    },

    //状态变更

    changeStatus() {

      if (this.status === '2') {

        this.status = '0'

        servereducible({

          ids: this.ids,

          status: this.status

        }).then(res => {

          console.log(res)

          this.$message.success('修改成功')

          this.getTimeList()

        })

      } else {

        this.status = '2'

        console.log(this.status)

        servereducible({

          ids: this.ids,

          status: this.status

        }).then(res => {

          console.log(res)

          this.$message.success('修改成功')

          this.getTimeList()

        })

      }

    },

    //预约学生

    reservationStudent() {

      this.dialogVisible = true

      this.valueStudent = ''

    },

    //添加预约

    addAppoint() {

      this.dialogVisible = false

      if (this.valueSubject === '团体预约') {

        this.peopleType = 1

      } else {

        this.peopleType = 0

      }

      addStudent({

        mode: this.valueMethod,

        peopleType: this.peopleType,

        schedulingId: this.ids,

        studentId: this.stuId

      }).then(res => {

        this.$message.success('添加成功')

        console.log(res)

        this.getTimeList()

      })

    },

    //获取class

    getClass(item) {

      if (item.status === '0') {

        return 'timeCardGreen'

      } else if (item.status === '1') {

        return 'timeCardRed'

      } else {

        return 'timeCardYellow'

      }

    },

    // 取消预约

    candle() {


      this.dialogVisibleReason = true

    },

    //取消预约理由

    okBtn() {

      if (this.text === '') {

        this.$message.warning('请填写预约取消理由不能为空')

      } else {

        this.$confirm('此操作将取消预约, 请确认是否继续?', '提示', {

          confirmButtonText: '确定',

          cancelButtonText: '取消',

          type: 'warning'

        }).then(() => {

          cancelStudent({id: this.studentId, reason: this.text}).then(res => {

            console.log(res)

            this.getTimeList()

            this.$message.success('取消预约成功')

            this.dialogVisibleReason = false

            this.dialogVisibleLeft = false

          })

        })

      }

    },

    // 上一天按钮

    lastDay() {

      this.valueDate = new Date(this.valueDate.setDate(this.valueDate.getDate() - 1))

      this.query.date = moment(this.valueDate).format('YYYY-MM-DD')

      this.getTimeList()

    },

    //下一天按钮

    nextDay() {

      this.valueDate = new Date(this.valueDate.setDate(this.valueDate.getDate() + 1))

      this.query.date = moment(this.valueDate).format('YYYY-MM-DD')

      console.log(this.valueDate0)

      this.getTimeList()

    }

  },


  created() {

    //获取咨询师列表

    getTeacher().then(res => {

      console.log(res)

      this.options = res.rows

    })

    this.query.date = moment(new Date()).format('YYYY-MM-DD')

    console.log(this.query.date)

    this.getTimeList()


    getStudent({teacherId: this.query.teacherId}).then(res => {

      console.log(res)

      this.studentList = res.data

      this.studentList.forEach(item => {

        item.name = `${item.name}(${item.stuNum})`

      })

    })

    //默认选中

    this.valueMethod = this.optionsMethods[0].value

    this.valueSubject = this.optionsSubject[0].value

  },


}

</script>


<template>

  <div class="container" @click="clickRightNone">
    <div class="seek">
      <span>当前咨询师：</span>
      <el-select v-model="value" clearable @change=change(value)>
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </div>
    <div class="main">
      <el-calendar v-model="valueDate" class="date">
        <template
          slot="dateCell"
          slot-scope="{date, data}"
        >
          {{ data.day.split('-').slice(2).join('-') }}
          <div :class="updateClass(data)" v-if="newDateTable.includes(data.day)" @click="select(data.day)"></div>
        </template>
      </el-calendar>
      <div class="right">
        <div class="rightHead">
          <div class="detail">
            <span>详细情况</span>
            <el-popover
              placement="top-start"
              width="300"
              trigger="hover"
              content="时间段右击可进行快捷选项操作(时间段未开始并且未预约)">
              <el-button  icon="el-icon-question" class="iconBtn"></el-button>
            </el-popover>
          </div>

          <div class="nextDay">

            <el-button size="mini" class="deault" @click="lastDay(1)">上一天</el-button>

            <el-button size="mini" style="margin-left: -2px" @click="nextDay">下一天</el-button>

          </div>

        </div>

        <div class="rightMain">

          <div class="mainHead">

            <el-button class="niceBtn" @click="reducibleBtn">可约</el-button>

            <el-button class="niceBtn" @click="restBtn">休息</el-button>

          </div>

          <div class="center">

            <div :class="getClass(item)" ref="card" @click.right="clickRight(item.id,index,item.status)"
                 v-for="(item,index) in timeList" :key="item.id" @click.left="clickLeft(item.id,item.status)">
              <div class="oftenNone" v-if="item.status==='2'">休息
                <div class="checkBoxYellow" v-if="checkFlagRest">
                  <el-checkbox @change="changeCheck(item.id)"></el-checkbox>
                </div>
              </div>
              <div class="oftened" v-else-if="item.status==='1'">已约
                <!--                <div class="checkBoxYellow" v-if="checkFlagRest">-->
                <!--                  <el-checkbox @change="changeCheck(item.id)"></el-checkbox>-->
                <!--                </div>-->
              </div>
              <div class="often" v-else>可约
                <div class="checkBoxGreen" v-if="checkFlag">
                  <el-checkbox @change="changeCheck(item.id)"></el-checkbox>
                </div>
              </div>
              <span>{{ item.startTime }} - {{ item.endTime }}</span>
              <el-dialog
                title="添加预约"
                :visible.sync="dialogVisible"
                width="15%"
              >
                <div class="selectStudent">
                  <span class="selectText">选择学生：</span>
                  <el-select v-model="valueStudent" placeholder="请选择" class="Int" @change="selectStu(valueStudent)">
                    <el-option
                      v-for="item in studentList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                  <span class="selectText">咨询类型：</span>
                  <el-select v-model="valueSubject" placeholder="请选择" class="Int">
                    <el-option
                      v-for="item in optionsSubject"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <span class="selectText">咨询方式：</span>
                  <el-select v-model="valueMethod" placeholder="请选择" class="Int">
                    <el-option
                      v-for="item in optionsMethods"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      :disabled="item.disabled"
                    >
                    </el-option>
                  </el-select>
                </div>
                <span slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="addAppoint" style="text-align: center">确 定</el-button>
                </span>

              </el-dialog>
            </div>

            <!--        //状态变更-->
            <div class="changeMenu" v-if="flagState" :style="{top:top0,left:left0}">
              <div class="changeState" @click="changeStatus">状态变更</div>
              <div class="changeState" @click="reservationStudent">预约学生</div>
            </div>
          </div>
        </div>

        <div class="rightFoot" v-if="serveBtn">
          <el-button style="width: 70px;height: 35px" @click="cancellation">取消</el-button>
          <el-button type="primary" @click="serveBut">保存</el-button>
        </div>

      </div>

      <!--      鼠标左击打开-->

      <el-dialog

        title="提示"

        :visible.sync="dialogVisibleLeft"

        width="48%"

      >

        <el-descriptions class="margin-top" :column="2" border>

          <el-descriptions-item>

            <template slot="label">

              姓名

            </template>

            {{ studentMessageName }}

          </el-descriptions-item>

          <el-descriptions-item>

            <template slot="label">

              学历

            </template>

            {{ studentEducation }}

          </el-descriptions-item>

          <el-descriptions-item>

            <template slot="label">

              年龄

            </template>

            22

          </el-descriptions-item>

          <el-descriptions-item>

            <template slot="label">

              班级

            </template>

            该学生已注销

          </el-descriptions-item>

          <el-descriptions-item>

            <template slot="label">

              学号

            </template>

            {{ studentCode }}

          </el-descriptions-item>

          <el-descriptions-item>

            <template slot="label">

              咨询方式

            </template>

            {{ studentMethods }}

          </el-descriptions-item>

          <el-descriptions-item>

            <template slot="label">

              问题描述

            </template>


          </el-descriptions-item>


        </el-descriptions>

        <span slot="footer" class="dialog-footer">

    <el-button type="primary" @click="candle">取消预约</el-button>

  </span>

      </el-dialog>

      <!--      取消预约理由-->

      <el-dialog

        title="取消预约"

        :visible.sync="dialogVisibleReason"

        width="37%"

      >

        <el-input

          type="textarea"

          resize="none"

          placeholder="请输入取消原因"

          v-model="text"

          maxlength="500"

          show-word-limit

        >

        </el-input>

        <span slot="footer" class="dialog-footer">

    <el-button @click="dialogVisibleReason = false">取 消</el-button>

    <el-button type="primary" @click="okBtn">确 定</el-button>

  </span>

      </el-dialog>

    </div>

  </div>


</template>


<style scoped lang="scss">

.container {

  padding: 35px 20px;

  width: 100%;

}


.seek {


}


.selectText {

  font-size: 14px;

  display: block;

  margin-bottom: 14px;

  text-align: left;

  line-height: normal;

}


.main {

  display: flex;

  justify-content: space-between;

  gap: 40px;

  overflow-x: auto;

}

//右击显示盒子
.changeMenu {
  padding: 20px 0;
  z-index: 999;
  background-color: #fff;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #e6ebf5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  font-size: 14px;
  top: 20px;
  left: 20px;
  position: relative;
  width: 200px;


  .changeState {
    padding: 5px 15px;
    text-align: center;
    box-sizing: border-box;
    line-height: normal;
  }

}


.date {

  width: 50%;

}


.right {

  width: 50%;

}


.rightHead {

  display: flex;

  justify-content: space-between;

  padding: 8px 20px;

  border-bottom: 1px solid #dfe6ec;

}


.iconBtn {

  border: none;

  width: 10px;

}


::v-deep {

  .el-textarea__inner {

    height: 200px;

  }

  .el-dialog {

    border-radius: 10px;

  }


  .el-dialog__body {

    padding: 30px 20px 0 20px;

  }


  .el-dialog__footer {

    text-align: center;

    line-height: 0;

  }


  .el-button-group > .el-button:nth-child(2) {

    display: none;

  }


  .el-dialog__header {

    background: #406ef2;

    border-radius: 10px 10px 0 0;

    line-height: normal;

    text-align: left;

    color: #fff;

  }


  .el-dialog__title {

    line-height: 24px;

    font-size: 18px;

    color: #fff;

  }


  .el-dialog__header .el-dialog__close {

    color: #fff;

  }


  .Int {

    line-height: normal;

    height: 40px;

  }

}


.rightMain {

  padding: 12px 20px;

}


.niceBtn {

  width: 100px;

  height: 30px;

  line-height: 30px;

  padding: 0;

}


.center {

  padding: 20px 0;

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}


.timeCardYellow {

  width: 24%;

  height: 80px;

  line-height: 80px;

  text-align: center;

  background-color: rgba(219, 162, 0, .23);

  position: relative;

  border-radius: 4px;

  cursor: pointer;

}


.timeCardRed {

  width: 24%;

  height: 80px;

  line-height: 80px;

  text-align: center;

  background-color: rgba(255, 27, 27, .1);

  position: relative;

  border-radius: 4px;

  cursor: pointer;

}


.timeCardGreen {

  width: 24%;

  height: 80px;

  line-height: 80px;

  text-align: center;

  background-color: rgba(146, 255, 122, .2);

  position: relative;

  border-radius: 4px;

  cursor: pointer;

}


.often {

  position: absolute;

  top: 5px;

  right: 5px;

  background-color: #13ce66;

  border-color: #13ce66;

  color: #fff;

  height: 20px;

  padding: 0 5px;

  line-height: 19px;

  font-size: 12px;

  border-radius: 4px;

}


.oftened {

  position: absolute;

  top: 5px;

  right: 5px;

  background-color: #ff4949;

  border-color: #ff4949;

  color: #fff;

  height: 20px;

  padding: 0 5px;

  line-height: 19px;

  font-size: 12px;

  border-radius: 4px;

}


.oftenNone {

  position: absolute;

  top: 5px;

  right: 5px;

  background-color: #ffba00;

  border-color: #ffba00;

  color: #fff;

  height: 20px;

  padding: 0 5px;

  line-height: 19px;

  font-size: 12px;

  border-radius: 4px;

}


.timeCardYellow {

  width: 24%;

  height: 80px;

  line-height: 80px;

  text-align: center;

  background-color: rgba(219, 162, 0, .23);

  position: relative;

  border-radius: 4px;

  cursor: pointer;

}


.often0 {

  position: absolute;

  top: 5px;

  right: 5px;

  background-color: #ffba00;

  border-color: #ffba00;

  color: #fff;

  height: 20px;

  padding: 0 5px;

  line-height: 19px;

  font-size: 12px;

  border-radius: 4px;

}


.update {

  padding-top: 15px;

  text-align: center;

  color: #23a500;

}


.update::after {

  content: '可约';

}


.update0 {

  padding-top: 15px;

  text-align: center;

  color: #ff1b1b;

}


.update0::after {

  content: '不可约';

}


.checkBoxYellow {

  height: 14px;

  width: 14px;

  position: absolute;

  left: -92px;

  top: 0;

  border: none;

}


.checkBoxGreen {

  height: 14px;

  width: 14px;

  position: absolute;

  left: -92px;

  top: 0;

  border: none;

}


.rightFoot {

  text-align: right;

}


.selectStudent {

  line-height: normal;

}

</style>

